<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件处理程序</title>
        <style>
            .outer ,
            .middle ,
            .inner { border: 2px solid transparent; margin: 50px; }
            .outer { border-color: red ; }
            .middle { border-color: blue ; }
            .inner { border-color: green ; min-height: 100px ; }
        </style>
    </head>
    <body>

        <div class="outer">
            <div class="middle">
                <div class="inner"></div>
            </div>
        </div>

        <script type="text/javascript">
            let x = {
                name: '钰哥',
                init(){
                    const type = 'click' ;
                    const capture = false ;
                    const listener = function(e){
                        console.log( this , e.target );
                    }
                    const outer = document.querySelector( '.outer' );
                    outer.addEventListener( type , listener , capture );

                    const middle = document.querySelector( '.middle' );
                    middle.addEventListener( type , listener , capture );

                    const inner = document.querySelector( '.inner' );
                    inner.addEventListener( type , listener , capture );
                }
            }

            x.init();
        </script>

    </body>
</html>